<template>
  <div style="position:relative">
    <div>
      <input v-model="timeValue" type="text" class="date-picker-input" placeholder="请选择日期" @click="onInput"/>
    </div>
      <transition name="fade">
        <div v-show="pickerVisible" class="propver">
          <button @click="toggleToYang" class="btn btn-top" :class="{active: isYnagLi}">阳历</button>
          <button @click="toggleToNong" class="btn btn-top" :class="{active: isNongLi}">农历</button>
          <div class="content" style="position: relative">
            <div class="timepick">
              <button @click="toggleToDate" class="btn btn-lf" :class="{active: isDate}">日期</button>
              <button @click="toggleToTime" class="btn btn-lf" :class="{active: isTime}">时间</button>
            </div>
            <div class="datepick">
              <date-picker v-show="isDate" :dateType="isYnagLi" :value="dateTimes"  @input="getTime" @change="changeTime" ></date-picker>
              <!-- <time-picker v-if="isTime" @timeChange="timeChange" :time="time" @confirm="closePicker" ></time-picker> -->
              <time-range v-if="isTime" @timechange="timeRangeChange" :range="timeRange" @confirm="closePicker"></time-range>
            </div>
          </div>
        </div>
      </transition>
  </div>
</template>

<script>
import DatePicker from './DatePicker'
import TimePicker from './TimePicker'
import TimeRange from './timeRange'
export default {
  components: {
    DatePicker,TimePicker,TimeRange
  },
  // props: {
  //   dateTime: ''
  // },
  data() {
    return {
      dateTimes: '',
      isYnagLi: true,
      isNongLi: false,
      isDate: true,
      isTime: false,
      pickerVisible: false,
      timeValue: '2020-10-10',
      time: {
        h: '05',
        m: '07',
        s: '30'
      },
      timeRange: ['10:00:00', '18:00:00']
    }
  },
  created() {
    this.dateTimes = this.timeValue
    console.log(this.dateTimes);
    
  },
  mounted() {
    document.addEventListener('click', (e) => {
        let input = this.$el.querySelector('.date-picker-input')
        let main = this.$el.querySelector('.propver')
        if (!main.contains(e.target) && !input.contains(e.target)) {
          this.pickerVisible = false
        }
      })
  },
  methods: {
    closePicker(){
      this.pickerVisible = false
    },
    onInput() {
      this.pickerVisible = true
      this.isDate = true
      this.isTime = false
    },
    toggleToYang() {
      this.isYnagLi = true
      this.isNongLi = false
    },
    toggleToNong() {
      this.isYnagLi = false
      this.isNongLi = true
    },
    getTime(t){
      this.pickerVisible = false
      this.isYnagLi = true
      this.isNongLi = false
    },
    changeTime(t) {
      console.log(t);
      this.dateTimes = t.result
      this.timeValue = t.result1
      console.log(this.timeValue);
      this.pickerVisible = false
    },
    toggleToDate() {
      this.isTime = false
      this.isDate = true  
    },
    toggleToTime() {
      this.isTime = true
      this.timeValue = this.time
      this.isDate = false
    },
    timeChange(time) {
      console.log(time);
      this.time = timeChange
      this.timeValue = this.time
    },
    timeRangeChange(time) {
      this.timeRange = time
      this.timeValue = time[0] + '~' + time[1]
    }
  }
}
</script>

<style scoped lang="less">
.fade-enter-active, .fade-leave-active {
  transition: all .1s;
  overflow: hidden;
  opacity: 1;
}
.fade-enter, .fade-leave-to {
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.content {
  display: flex;
  border-top: 1px solid #e4e7ed;
  margin-top: 10px;
  .timepick {
    width: 60px;
    padding-right: 5px;
    border-right: 1px solid #e4e7ed;
  }
  .datepick {
    flex: 1;
  }
}

</style>
